<template>
  <div class="search-container">
    <el-input
      v-model="searchValue"
      placeholder="搜索工具..."
      size="large"
      clearable
      @input="handleSearch"
      @clear="handleClear"
    >
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'ToolSearchBar',
  data() {
    return {
      searchValue: ''
    }
  },
  methods: {
    ...mapActions('tools', ['updateSearch']),
    handleSearch(value) {
      this.updateSearch(value)
    },
    handleClear() {
      this.updateSearch('')
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  max-width: 600px;
  margin: 0 auto;
}
</style> 